<!DOCTYPE html>
<html>
<head>
    <title>Electromagnetic Field Diagram</title>
    <style>
        canvas {
            border: 1px solid #d3d3d3;
        }
    </style>
</head>
<body>

<canvas id="myCanvas" width="450" height="400"></canvas>

<script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');

    // --- Style ---
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 2.5;
    ctx.font = 'bold 22px "Times New Roman", serif';
    ctx.lineCap = 'round';
    ctx.lineJoin = 'round';

    // --- Arrow drawing function ---
    function drawArrow(fromx, fromy, tox, toy, headlen = 12) {
        const dx = tox - fromx;
        const dy = toy - fromy;
        const angle = Math.atan2(dy, dx);
        ctx.beginPath();
        ctx.moveTo(fromx, fromy);
        ctx.lineTo(tox, toy);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(tox, toy);
        ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
        ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
        ctx.closePath();
        ctx.fill();
    }

    // --- Coordinates ---
    const origin = { x: 150, y: 250 };

    // --- Draw Axes ---
    // z-axis (UP)
    drawArrow(origin.x, origin.y, origin.x, 80);
    // x-axis (East)
    drawArrow(origin.x, origin.y, 350, origin.y);
    // y-axis (North)
    drawArrow(origin.x, origin.y, 250, 150);

    // --- Draw Guide Line for Current Vectors ---
    // In the original, the arrow starts lie on a diagonal line. 
    // This line is essentially the y-axis in this 3D representation.
    // We draw a simple line to represent this.
    ctx.beginPath();
    ctx.moveTo(origin.x - 50, origin.y + 50);
    ctx.lineTo(origin.x + 60, origin.y - 60);
    ctx.stroke();

    // --- Draw Current Vectors ---
    // The arrows start on the guide line and point in the +x direction.
    // Their lengths vary for visual clarity.
    drawArrow(origin.x + 60, origin.y - 60, origin.x + 150, origin.y - 60);
    drawArrow(origin.x + 40, origin.y - 40, origin.x + 160, origin.y - 40);
    drawArrow(origin.x + 20, origin.y - 20, origin.x + 170, origin.y - 20);
    drawArrow(origin.x, origin.y, origin.x + 180, origin.y);
    drawArrow(origin.x - 25, origin.y + 25, origin.x + 140, origin.y + 25);
    drawArrow(origin.x - 50, origin.y + 50, origin.x + 90, origin.y + 50);

    // --- Draw Labels ---
    ctx.textAlign = 'center';
    ctx.fillText('UP (z)', origin.x + 5, 70);
    ctx.textAlign = 'left';
    ctx.fillText('North (y)', 255, 150);
    ctx.fillText('East (x)', 320, origin.y - 10);
    ctx.textAlign = 'right';
    ctx.fillText('0', origin.x - 10, origin.y + 10);
    ctx.textAlign = 'center';
    ctx.fillText('Fig. 2.50', 225, 370);
    ctx.textAlign = 'left';
    ctx.fillText('λ', 250, 215);

</script>

</body>
</html>